<template>
  <div>
    <div class="heart-box">
      <div class="switch">
        <span class="switch-name">开启网络心跳图</span>
        <el-switch v-model="offHeart"></el-switch>
      </div>
      <div style="width: 650px; height: 400px;" id="chart-box" ref="heartChart"></div>
      <!--			<div style="width: 1000px; height: 600px;" id="chart-box" ref="heartChart"></div>-->
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import API from '@/api/index.js'
import DATE from '@/utils/date.js'

export default {
  data() {
    return {
      offHeart: true,
      uuid: '',
      heartChart: null,
      heartOption: {},
      timer: '',
      langtime: 10,
      last_time: '无' // 最后的刷新时间
    }
  },
  mounted() {
    this.uuid = localStorage.getItem('device_uuid');
    if (this.offHeart == true) {
      this.getHeart();
    }
  },
  watch: {
    offHeart(val) {
      if (val == true) {
        this.langtime = 10;
        this.getHeart();
      } else if (val == false) {
        clearInterval(this.timer)
      }
    }
  },
  methods: {
    initHeartChart() {
      let self = this;
      self.heartChart = echarts.init(self.$refs.heartChart);
      self.heartOption = {
        title: {
          text: `网络心跳图${self.langtime}秒后刷新，最后刷新时间${self.last_time}`
        },
        xAxis: {
          name: '时间/秒',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'line',
          center: ['10%', '10%'],
        }]
      };
      self.heartChart.setOption(self.heartOption)
    },

    getHeart() {
      let self = this;
      self.initHeartChart();
      self.getHeartBeats();
      self.$nextTick(() => {
        self.timer = setInterval(() => {
          if (self.langtime == 0) {
            self.initHeartChart();
            self.getHeartBeats();
            self.langtime = 10;
          } else {
            self.heartChart.setOption({
              title: {
                text: `网络心跳图${self.langtime--}秒后刷新，最后刷新时间${self.last_time}`
              }
            });
          }
        }, 1000)
      })
    },

    // 获取设备心跳
    async getHeartBeats() {
      let self = this;
      try {
        self.heartChart.showLoading();
        let res = await API.heartBeats(self.uuid);
        let indexArray = [];
        let valueArray = [];
        self.last_time = res.data.data.last_time ? DATE.formatTime(res.data.data.last_time,
            'Y-M-D h:m:s') : '无';
        for (let i = 0; i < res.data.data.heartbeats.length; i++) {
          indexArray.push(i);
          valueArray.push(res.data.data.heartbeats[i]);
        }
        self.heartChart.setOption({
          xAxis: {
            name: '时间/秒',
            data: indexArray
          },
          series: [{
            data: valueArray,
            type: 'line'
          }]
        });
        self.heartChart.hideLoading();
      } catch (err) {
        self.heartChart.hideLoading();
        console.log(err)
      }
    },
  },
  beforeUnmount() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped lang="scss">
.heart-box {
  display: flex;
  flex-direction: column;

  .switch {
    display: flex;
    justify-content: center;
    align-items: center;

    .switch-name {
      font-size: 20px;
      font-weight: 600;
      margin-right: 10px;
    }
  }

}
</style>
